<template>
	<view class="bgf8">
		<view style="height: 20rpx;"></view>
		<!-- 地址 -->
		<view class="w343" style="height: 180rpx;;color: #000000;line-height: 38rpx;">
			<view class="fs15" style="padding:44rpx 0 0 30rpx;font-weight: 700;">
				<text>{{sitedata.name}}</text>
				<text style="margin-left: 20rpx;">{{sitedata.mobile}}</text>
			</view>
			<view class="fs13" style="margin-left: 30rpx;margin-top: 16rpx;">
				{{sitedata.detail_address}}
			</view>
		</view>
		<!-- 小计 -->
		<view class="w343" style="margin-top: 24rpx;">
			<view class="w90 fs14" style="height: 90rpx;line-height: 90rpx;">
				<h5>{{name}}</h5>
			</view>
			<view class="w90" style="border-bottom: 1rpx solid rgba(243,243,243,1);">
				<view style="display: flex; margin: 30rpx 0" v-for="(item,index) in setData">
					<image :src="item.image"></image>
					<view style="margin-left: 30rpx;width: 70%;position: relative;">
						<view class="fs13" style="position: relative;">
							<text>{{item.name}}</text>
							<text style="position: absolute;right: 0;">￥{{item.price}}</text>
						</view>
						<view class="fs11">规格:
							<text v-for="(itm,idx) in item.sku" style="margin-left: 20rpx;margin-top: 8rpx;">
								{{itm.value}} </text>
						</view>
						<text class="Ptc fs12">×{{item.number}}</text>
					</view>
				</view>
			</view>
			<view class="w90 fs12">
				<view style="padding: 30rpx 0;">
					<view style="position: relative;line-height: 46rpx;">
						<text>配送费</text>
						<text class="redrt">￥{{shopping_fee}}</text>
					</view>
					<view style="position: relative;line-height: 46rpx;">
						<text>包装费</text>
						<text class="redrt">￥{{package_fee}}</text>
					</view>
					<view style="position: relative;line-height: 46rpx;">
						<text>店铺满减</text>
						<text class="redrt">-￥{{full_price}}</text>
					</view>
					<view style="position: relative;line-height: 46rpx;">
						<text>选择优惠卷</text>
						<text class="redrt" v-if="Discountmoney != 0" @click="Youhuijuan">{{Discountmoney}}</text>
						<text class="redrt" v-else @click="Youhuijuan">选择优惠卷</text>
					</view>
				</view>
				<view style="position: relative;">
					<text>订单备注</text>
					<view class="redrt" style="top: 0;text-align: right;right: 10%;">
						<input @blur="beizhu" class="fs12" type="text" value="" placeholder="在这里输入信息" />
						<image class="redrt" style="width: 10rpx;height: 18rpx;right: -5%;top: 14rpx;"
							src="../../../static/iconfh.png" mode=""></image>
					</view>
				</view>
				<view style="height: 80rpx;margin-top: 38rpx;position: relative;">
					<view class="fs12" style="position: absolute;right: 8%;">
						<text>小计</text><text>￥</text>
						<text class="fs16" style="font-weight: 700;">{{total_fee}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 支付 -->
		<view class="pofx" style="">
			<view class="pobtm">
				<view class="poleft fs14" style="text-align: center;line-height: 90rpx;">
					共<text class="fs16" style="padding: 0 5rpx;">{{boughtnum}}</text> 件商品，合计：￥<text class="fs16"
						style="font-size: 700;">{{total_fee}}</text>
				</view>
				<view class="poright center fs15" @click="payment">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				id: 0, //店铺id
				name: '', //店铺名称
				boughtnum: 0, //购买商品数量
				setData: {}, //购物车列表
				shopping_fee: 0, //配送费
				package_fee: 0, //餐盒费
				full_price: 0, //满减金额
				total_fee: 0, //订单总价
				sitedata: {}, //默认配送地址
				youhuiojuan: {}, //我的优惠卷
				remark: '', //订单备注
				oid: 0,
				omoney: 0,
			}
		},
		onLoad(options) {
			this.id = options.id * 1
			this.boughtnum = options.num * 1
			console.log('优惠卷id' + this.Discountid, '优惠价格' + this.Discountmoney)
			this.getdata()
			this.getSite();
		},
		methods: {
			//刷新数据事件
			refreshRequest() {
				this.total_fee = this.total_fee - this.Discountmoney
			},
			//获取购物车列表 
			getdata() {
				this.$request('api/cart/jiesuan/' + this.id, {}, "GET", {
					Authorization: this.token
				}).then(res => {
					console.log(res)
					this.name = res.data.name
					this.shopping_fee = res.data.shopping_fee //配送费
					this.package_fee = res.data.package_fee //餐盒费
					this.full_price = res.data.full_price //满减金额
					this.total_fee = res.data.total_fee //订单总价
					this.setData = res.data.goods //购买商品
				})
			},
			getSite() {
				this.$request('api/user/address/get', {

				}, "GET", {
					Authorization: this.token
				}).then(res => {
					this.sitedata = res.data
				})
			},
			// 选择优惠卷
			Youhuijuan() {
				// console.log(this.id,this.total_fee)
				// console.log(this.id, this.total_fee, this.token)
				this.$request('api/coupons/usable', {
					store_id: this.id,
					goods_fee: this.total_fee
				}, "GET", {
					Authorization: this.token
				}).then(res => {
					this.youhuiojuan = res.data
				})
				setTimeout(() => {
					uni.navigateTo({
						url: `../../RedPacket/RedPacket?id=${encodeURIComponent(JSON.stringify(this.youhuiojuan))}`
					})
				}, 300)
			},
			beizhu(e) {
				this.remark = e.target.value
			},
			// 下单
			payment() {
				console.log('店铺ID' + this.id, '收货地址ID' + this.sitedata.id, '	优惠券ID' + this.Discountid, '	订单备注' + this
					.remark)
				// 下单接口
				this.$request('api/order/create', {
					store_id: this.id,
					address_id: this.sitedata.id,
					coupon_id: this.Discountid,
					remark: this.remark
				}, "POST", {
					Authorization: this.token
				}).then(res => {
					this.payments(res.data.pay)
					console.log(res.data.pay)
				})
				// 清空购物车数据
				// this.$request('api/cart/clear', {
				// 	type: 2,
				// 	id: this.id
				// }, "DELETE", {
				// 	Authorization: this.token
				// }).then(res => {
				// 	console.log(res)
				// })
				// 
			},
			// 支付
			payments(res) {
				console.log(res)
				uni.requestPayment({
					provider: 'weixin',
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			}
		},
		computed: {
			...mapState(['token', 'Discountid', 'Discountmoney'])
		}
	}
</script>

<style>
	.w343 {
		width: 686rpx;
		margin: 0 auto;
		background: #FFFFFF;
	}

	.w90 {
		width: 90%;
		margin: 0 auto;
		border-bottom: 1px solid #ececec;
	}

	.w90>view>image {
		width: 108rpx;
		height: 108rpx;
	}

	.redrt {
		color: rgba(255, 67, 67, 1);
		position: absolute;
		right: 8%;
	}

	.pofx {
		width: 100%;
		height: 170rpx;
		background: #FFFFFF;
		position: relative;
		left: 0;
		bottom: 0rpx;

	}

	.pobtm {
		width: 686rpx;
		height: 90rpx;
		border-radius: 90rpx;
		line-height: 90rpx;
		position: absolute;
		top: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		overflow: hidden;
	}

	.poleft {
		width: 492rpx;
		height: 90rpx;
		background: rgba(36, 188, 129, 1);
		position: relative;
		line-height: 30rpx;
		color: #FFFFFF;
	}

	.poright {
		width: 194rpx;
		height: 90rpx;
		background: #FFCB57;
		font-weight: 700;
		color: #333333;
	}

	.text33 {
		position: absolute;
		left: 130rpx;
		top: 10rpx;
	}

	.Ptc {
		position: absolute;
		bottom: 0;
	}
</style>
